<template>
    <div class="PublicTable">
        <el-table 
            :data="tableData"
            :header-cell-style="{background:'#f8fbff'}" 
            @selection-change="handleSelectionChange" 
            :height="tableHeight"
        >
            <!-- 全选单选 --> 
            <el-table-column v-if="configFlag.selection" align="center" width="55" type="selection" />
            <!-- 序号列 -->
            <el-table-column v-if="configFlag.index" align="center" width="100" type="index" :index="1" :label='configFlag.indexName || "序号"' />
            <!-- 循环遍历表头展示数据 -->
            <el-table-column 
                v-for="item in tableTitleData" 
                :key="item.value" 
                :width="item.width || ''" 
                :prop="item.value" 
                :label="item.label" 
                :align="item.align || 'center'" 
                :sortable="item.sortable" 
                header-align="center"
            >
                <template slot-scope="scope">
                    <!-- 根据需求添加效果 返回的slot可以优化.自己来吧. -->
                    <slot v-if="item.slotname" :scope="scope" :name="item.slotname" />
                    <div v-else>
                        <span>{{ scope.row[item.value] }}</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    
        <pagination 
            v-if="configFlag.needPage" 
            :total="pageValue.total" 
            :pageNum="pageValue.pageNum" 
            :pageSize="pageValue.pageSize" 
            class="fr" 
            @sizeChange="sizeChange" 
            @currentChange="currentChange" 
        />
    </div>
</template>

<script>
export default {
    name: 'PublicTable',
    props: {
        tableTitleData: { // 表头数据  文案和绑定值，以及需要特殊处理的slot
            type: Array, 
            default: () => []
        },
        tableData: { // 后台数据
            type: Array,
            default: () => []
        },
        pageValue: { // 分页数据
            type: Object,
            default: () => {
                return {
                    pageNum: 1,
                    pageSize: 10,
                    total: 0
                }
            }
        },
        configFlag: {// 配置  其他table配置依次添加
            type: Object, 
            default: () => {
                return {
                    needPage: false, // 是否需要分页
                    selection: false, // 是否需要多选
                    index: false // 是否需要序号
                }
            }
        },
        tableHeight: { // 高度 可以监听屏幕高度获取。
            type: Number,
            default: () => null
        }
    },
    methods: {
        sizeChange(val) { // 翻页
            console.log(`handleChange=====${val}`)
            this.$emit('handleChange', { pageSize: val })
        },
        currentChange(val) { // 设置条数
            console.log(`currentChange=====${val}`)
            this.$emit('currentChange', { pageNum: val })
        },
        handleSelectionChange(val) { // 多选
            console.log(`handleSelectionChange=====${val}`)
            this.$emit('handleSelectionChange', val)
        }
    }
}
</script>